
<template xmlns:el-col="http://www.w3.org/1999/html">
  <div>
    <div style="margin-bottom: 10px;">
      <el-input v-model="name" placeholder="请输入姓名..."  suffix-icon="el-icon-search" style="width: 200px"></el-input>
      <el-button style="margin-left: 5px;" @click="loadPostByName">查询</el-button>
      <el-button @click="resetParam">重置</el-button>

      <el-button style="margin-left: 5px;" @click="add">新增</el-button>
    </div>

    <el-table :data="tableData"
              :header-cell-style="{background:'#eaecf3',color:'rgb(106,117,119)'}" border
    >
      <el-table-column prop="memberId" label="ID" width="60">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="80">
      </el-table-column>
      <el-table-column prop="gender" label="性别" width="60">
        <template slot-scope="scope">
          <el-tag
              disable-transitions>{{ scope.row.gender=== "男" ?'男':'女' }}</el-tag>
        </template>
      </el-table-column>
        <el-table-column prop="phone" label="电话" width="120">
      </el-table-column>
        <el-table-column prop="birthday" label="生日" width="120">
        </el-table-column>
        <el-table-column prop="email" label="邮箱" width="120">
        </el-table-column>
        <el-table-column prop="address" label="地址" width="120">
        </el-table-column>
      <el-table-column prop="registerDate" label="注册时间" width="120">
      </el-table-column>
      <el-table-column prop="lastVisit" label="最后到店时间" width="120">
      </el-table-column>
      <el-table-column prop="totalVisits" label="总共到店次数" width="60">
      </el-table-column>
      <el-table-column prop="totalSpending" label="总共花费" width="80">
      </el-table-column>
      <el-table-column prop="status" label="会员状态" width="80">
      </el-table-column>
      <el-table-column prop="operate" label="操作" width="200" >
        <template slot-scope="scope">
        <el-button @click="mod(scope.row)">编辑</el-button>
        <el-button @click="del(scope.row.memberId)">删除</el-button>
          </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
    <el-dialog title="提示" :visible.sync="centerDialogVisible" width="40%" center>
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="姓名" prop="name">
          <el-col :span="20">
          <el-input v-model="form.name"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="form.gender">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-col :span="20">
            <el-input v-model="form.phone"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="生日" prop="birthday">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.birthday" style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-col :span="20">
            <el-input v-model="form.email"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-col :span="20">
            <el-input v-model="form.address"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="最后到店时间" prop="lastVisit">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.lastVisit" style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="累计到店次数" prop="totalVisits">
          <el-col :span="20">
            <el-input v-model="form.totalVisits"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="累计消费金额" prop="totalSpending">
          <el-col :span="20">
            <el-input v-model="form.totalSpending"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="会员等级" prop="membershipLevel">
          <el-col :span="20">
            <el-input v-model="form.membershipLevel"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="form.status" style="width: 100%;">
            <el-radio label="ACTIVE"></el-radio>
            <el-radio label="INACTIVE"></el-radio>
            <el-radio label="BLACKLISTED"></el-radio>
          </el-radio-group>
        </el-form-item>
        </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>

export default {
     name: 'MemberManage',
  data() {
    return {
      tableData: [],
      pageSize:10,
      pageNum:1,
      total:0,
      name:'',
      centerDialogVisible: false,
      form:{
        memberId:'',
        name:'',
        gender:'',
        phone:'',
        email:'',
        birthday:'',
        address:'',
        lastVisit:'',
        totalVisits:'',
        totalSpending:'',
        membershipLevel:'',
        status:''
      }
    }
  },
  created() {
    this.loadPost()
  },
    methods: {
      resetForm() {
        this.$refs.form.resetFields();
      },

      del(memberId) {
        console.log(memberId);

        this.$axios.get(this.$httpUrl + '/member/delete?memberId=' + memberId)
            .then(res => res.data)
            .then(res => {
              console.log(res);
              if (res.code == 200) {
                this.$message({
                  message: '操作成功！',
                  type: 'success'
                });
                this.loadPost();
              } else {
                this.$message({
                  message: '操作失败！',
                  type: 'error'
                });
              }
            })
            .catch(error => {
              console.error('删除操作出错:', error);
              this.$message({
                message: '操作出错！',
                type: 'error'
              });
            });
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageNum = 1
        this.pageSize = val
        this.loadPost()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pageNum = val
        this.loadPost()
      },
      loadGet() {
        this.$axios.get(this.$httpUrl + '/member/list').then(res => res
            .data).then(res => {
          console.log(res)
        })
      },
      loadPost() {
        this.$axios.get(this.$httpUrl + '/member/listpage', {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize
          }
        }).then(res => res.data).then(res => {
          console.log(res)
          if (res.code == 200) {
            this.tableData = res.data
            this.total = res.total
          } else {
            alert('获取数据失败')
          }

        })
      },
      loadPostByName() {
        this.$axios.get(this.$httpUrl + '/member/listPageByName', {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            name: this.name
          }
        }).then(res => res.data).then(res => {
          console.log(res)
          if (res.code == 200) {
            this.tableData = res.data
            this.total = res.total
          } else {
            alert('获取数据失败')
          }

        })
      },
      mod(row){
        console.log(row)
        this.centerDialogVisible = true
        this.$nextTick(() => {
          this.form=row;
        })

      },
      add() {
        this.centerDialogVisible = true
        this.$nextTick(() => {
          this.resetForm()
        })
      },
      doSave(){
        this.$axios.post(this.$httpUrl + '/member/save',this.form).then(res => res.data).then(res => {
          console.log(res)
          if (res.code == 200) {
            this.$message({
              message: '操作成功！',
              type: 'success'
            });
            this.loadPost();
            this.centerDialogVisible = false
          } else {
            this.$message({
              message: '操作失败！',
              type: 'error'
            })
          }
        })
      },
      doMod(){
        this.$axios.post(this.$httpUrl + '/member/update',this.form).then(res => res.data).then(res => {
          console.log(res.code)
          if (res.code == 200) {
            this.$message({
              message: '操作成功！',
              type: 'success'
            });
            this.loadPost();
            this.centerDialogVisible = false
          } else {
            this.$message({
              message: '操作失败！',
              type: 'error'
            })
          }
        })
      },
      save(){
        this.$refs.form.validate((valid)=>{
          if(valid){
            if(this.form.memberId){
              this.doMod();
            }else {
              this.doSave();
            }
          }else {
            console.log('error submit');
            return false;
          }
        });
      },
      resetParam() {
        this.name = '';
        this.loadPost();
      }
    },
    beforeMount() {
      //this.loadGet();
      this.loadPost();
    }
  }
</script>
<style scoped>

</style>